<template>
	<view class="all">
		<view class="addBtn" @tap="addBtn">
			新增
		</view>
		<view class="table" style="overflow: scroll;">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">站点名称</uni-th>
					<uni-th align="center">姓名</uni-th>
					<uni-th align="center">身份证</uni-th>
					<uni-th align="center">联系电话</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, i) in tableList" :key="i">
					<uni-td align="center">{{ item.merchantName }}</uni-td>
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.idCard }}</uni-td>
					<uni-td align="center">{{ item.phone }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view style="margin-top: 10rpx;margin-right: 3.5vw;">
			<uni-pagination show-icon="true" :total="total" :current="currentIndexs" :pageSize="pageSize" @change="changeIndex"></uni-pagination>
		</view>
		<u-popup v-model="showAdd" mode="center">
			<view class="addPop" style="height: 480rpx;">
				<view class="popTop">
					新增从业人员
					<view @tap="cancelAdd">X</view>
				</view>
				<input
					style="width: 90%;margin-top: 40rpx;margin-left: 20rpx;margin-right: 20rpx;"
					v-model="name"
					placeholder="请输入姓名"
					class="inputStyle"
					placeholder-class="placeClass"
				/>
				<input
					style="width: 90%;margin-top: 40rpx;margin-left: 20rpx;margin-right: 20rpx;"
					v-model="idCard"
					placeholder="请输入身份证"
					class="inputStyle"
					placeholder-class="placeClass"
					maxlength="18"
					type="number"
				/>
				<input
					style="width: 90%;margin-top: 40rpx;margin-left: 20rpx;margin-right: 20rpx;"
					v-model="phone"
					placeholder="请输入电话"
					class="inputStyle"
					placeholder-class="placeClass"
					maxlength="11"
					type="number"
				/>
				<view class="addAllBtns">
					<view class="cancelClass" @tap="cancelAdd">取消</view>
					<view class="confirmClass" @tap="confirmAdd">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/utils/config.js';
	export default {
		data() {
			return {
				tableList: [],
				total: 0,
				currentIndexs: 1,
				pageSize: 10,
				showAdd: false,
				idCard: '',
				phone: '',
				name: '',
			}
		},
		onShow(){
			this.getDataList();
		},
		mounted() {
			this.currentIndexs = this.current;
		},
		methods:{
			getDataList(){
				uni.request({
					url: config.host + '/huishou/employees/queryList', //接口地址。
					data: {
						currentPage: this.currentIndexs,
						pageSize: this.pageSize,
						merchantId: uni.getStorageSync('userId'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: res => {
						if (res.data.code == 200) {
							console.log(res);
							this.tableList = res.data.items;
							this.total = res.data.page.total;
						}
					},
					fail: err => {
						uni.showToast({
							icon: 'none',
							title: '网络异常,请稍后重试'
						});
					}
				});
			},
			changeIndex(e) {
				this.currentIndexs = e.current;
				this.getDataList();
			},
			addBtn(){
				this.showAdd = true;
			},
			cancelAdd(){
				this.name = '';
				this.phone = '';
				this.idCard = '';
				this.showAdd = false;
			},
			confirmAdd(){
				// let testAccount = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
				let testIdcard =  /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				 
				 if(!testIdcard.test(this.idCard)){
					uni.showToast({
						icon: 'none',
						title: '身份证不正确'
					});
				}
				// else if(!testAccount.test(this.phone)){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '手机号不正确'
				// 	});
				// }
				else{
					uni.request({
						url: config.host + '/huishou/employees/add', //接口地址。
						data: {
							merchantId: uni.getStorageSync('userId'),
							name: this.name,
							phone: this.phone,
							idCard: this.idCard,
						},
						method: 'POST',
						header: {
							'content-type': 'application/json;charset=UTF-8'
						},
						success: res => {
							if (res.data.code == 200) {
								this.name = '';
								this.phone = '';
								this.idCard = '';
								this.showAdd = false;
								this.currentIndexs = 1;
								this.getDataList();
							}
						},
						fail: err => {
							uni.showToast({
								icon: 'none',
								title: '网络异常,请稍后重试'
							});
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.all{
		width: 90vw;
		margin: 0 auto;
		margin-top: 20rpx;
		float: right;
		.addBtn{
			width: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: #262797;
			color: #fff;
			border-radius: 10rpx;
			text-align: center;
			font-size: 26rpx;
		}
		.table{
			margin: 0 auto;
			margin-top: 20rpx !important;
			width: 90vw;
			overflow: scroll;
		}
		.addPop {
			width: 60vw;
			height: 300rpx;
		}
		.popTop {
			margin-top: 20rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}
		.addAllBtns {
			width: 90%;
			margin-top: 40rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-end;
		}
		.cancelClass {
			width: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #2d8cf0;
			margin-right: 30rpx;
			text-align: center;
		}
		.confirmClass {
			width: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #fff;
			background-color: #2d8cf0;
			border-radius: 5rpx;
			text-align: center;
		}
		.inputStyle {
			width: 48%;
			border: 1px solid #c5c5c5;
			height: 60rpx;
			border-radius: 10rpx;
			color: #c5c5c5;
			font-size: 28rpx;
			margin-top: 10rpx;
		}
		.placeClass {
			color: #c5c5c5;
			font-size: 28rpx;
		}
	}
</style>
